<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">商品评价</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <div class="search_box1">
          <!-- 时间选择区域 -->
          <span class="demonstration">提交时间：</span>
          <el-date-picker
            v-model="searchValue.startAt"
            type="date"
            placeholder="开始时间"
            @change="startTime"
            :clearable="false"
            :default-time="defaultTime(0, 0, 0)" />
          <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
            >至</span
          >
          <el-date-picker
            v-model="searchValue.endAt"
            type="date"
            placeholder="结束时间"
            @change="endTime"
            :clearable="false"
            :default-time="defaultTime1(23, 59, 59)" />
          &emsp;
          <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
            <el-radio label="1" size="large">今天</el-radio>
            <el-radio label="2" size="large">近7天</el-radio>
            <el-radio label="3" size="large">近30天</el-radio>
            <el-radio label="4" size="large">近3个月</el-radio>
          </el-radio-group>
          &emsp;&emsp;
          <!-- 信息区域 -->
          <div class="all_select">
            <!-- 订单编号 -->
            <div class="input_valye">
              <span class="demonstration">订单编号：</span>
              <input
                type="text"
                class="input"
                placeholder="请输入订单编号"
                v-model="searchValue.orderSn"
                @keyup.enter="search"
                style="width: 200px" />
            </div>
            <!-- 评价等级 -->
            <div class="input_valye">
              <span class="demonstration">评价等级：</span
              ><el-select
                v-model="searchValue.rating"
                class="m-2"
                placeholder="请选择评价等级"
                style="width: 200px !important"
                @change="search">
                <el-option v-for="item in rating_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <!-- 表格导航栏 -->
        <div class="nav" style="margin-bottom: 20px">
          <ul class="nav_ul">
            <li class="navlist nav_li">
              <span class="nav_lis">全部</span>
            </li>
          </ul>
        </div>
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :header-cell-style="{'text-align': 'center', background: '#F2F7FC'}"
          :row-class-name="tableRowClassName"
          :show-overflow-tooltip="true"
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="orderSn" label="订单编号" align="center" />
          <el-table-column prop="productName" label="商品名称" align="center" />
          <el-table-column prop="userName" label="用户名称" align="center" />
          <el-table-column prop="price" label="评价等级" align="center">
            <template #default="item">
              <span v-for="index in item.row.rating" :key="index" style="color: #ffcf4d"
                ><el-icon> <StarFilled /> </el-icon
              ></span>
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="提交时间" align="center" />
          <el-table-column label="操作" width="200" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="look(item.row)" v-if="roleList.read">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="total"
          @change="pageChange" />
      </div>
      <!-- 评价详情 -->
      <el-drawer v-model="drawer" :with-header="true">
        <!-- 商品信息 -->
        <div class="commodity">
          <!-- <div v-if="evaluate.product.decoration != null">
                    <img
                        v-if="evaluate.product.decoration.detailImgs.length == 0"
                        :src="evaluate.product.pics[0].url"
                        class="photo"
                    />
                    <img v-else :src="evaluate.product.decoration.detailImgs[0]" class="photo" />
                </div>
                <div v-else>
                    <div v-if="evaluate.product.pics.length != 0">
                        <img :src="evaluate.product.pics[0].url" class="photo" />
                    </div>
                    <img v-else src="@/page_shop/static/No_products.png" class="photo" />
                </div> -->
          <div class="mes">
            <div class="title">
              <div
                style="
                  display: inline-block;
                  width: 70%;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                ">
                {{ evaluate.product.name }}
              </div>
              <div class="star">
                <span v-for="index in evaluate.orderComment.rating" :key="index"
                  ><el-icon> <StarFilled /> </el-icon
                ></span>
              </div>
            </div>
            <div class="text">商品规格：白色</div>
            <div class="text">订单编号：{{ evaluate.orderComment.orderSn }}</div>
          </div>
        </div>
        <!-- 商品评价 -->
        <div class="evaluat">
          <div class="pic" v-if="evaluate.orderComment.anonymous">
            <img src="@/assets/images/avtor.png" alt="" class="photo" />
          </div>
          <div class="pic" v-else>
            <img :src="evaluate.orderComment.userHead" alt="" class="photo" />
          </div>
          <div class="detail">
            <div class="user">
              <!-- 用户名，评论时间 -->
              <div class="left">
                <!-- {{ evaluate.orderComment. }} -->
                <p v-if="evaluate.orderComment.anonymous">匿名用户</p>
                <p v-else>{{ evaluate.orderComment.userName }}</p>
                <div class="time">
                  {{ evaluate.orderComment.createdAt.substring(0, 10) }}
                </div>
              </div>
              <!-- 精选回复按钮操作 -->
              <div style="display: flex; align-items: center" v-if="ordertype === 1">
                <!-- 第二个参数传0表示回复根评论 -->
                <span
                  class="btn1"
                  @click="reply(evaluate.orderComment, 0)"
                  style="font-size: 14px; color: #79bbff; display: inline; margin-right: 10px; cursor: pointer"
                  >回复</span
                >

                <div class="box" style="color: #f68383; border: 1px solid #f68383; cursor: pointer" @click="handpick">
                  <el-icon> <Medal /> </el-icon>&nbsp;取消精选
                </div>
              </div>
              <!-- 非精选回复按钮操作 -->
              <div style="display: flex; align-items: center" v-else>
                <!-- 第二个参数传0表示回复根评论 -->
                <span
                  class="btn1"
                  @click="reply(evaluate.orderComment, 0)"
                  style="font-size: 14px; color: #79bbff; display: inline; margin-right: 10px"
                  >回复</span
                >

                <div
                  class="box"
                  style="color: #116cf8; border: 1px solid #116cf8; cursor: pointer"
                  @click="handpick"
                  v-if="roleList.write">
                  <el-icon> <Medal /> </el-icon>&nbsp;设置为精选
                </div>
              </div>
            </div>
            <!-- 评论内容 -->
            <div class="content">
              <!-- 评论文字内容 -->
              <div
                style="
                  word-wrap: break-word; /* 当单词太长无法在一行内容纳时，自动将单词拆分成多行 */
                  word-break: break-all; /* 允许在单词内换行 */
                ">
                {{ evaluate.orderComment.content }}
              </div>
              <!-- 评论图片 -->
              <div class="picture" v-if="evaluate.commentPics.length !== 0">
                <div v-for="(item, index) in evaluate.commentPics" :key="index">
                  <el-image
                    style="width: 100px; height: 100px; margin-right: 10px"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="evaluate.commentPics"
                    :initial-index="4"
                    fit="cover" />
                </div>
              </div>
              <!-- 追评 -->
              <div v-if="evaluate.addComment != null">
                <div class="addto">
                  <span class="pl1">追加评论</span>
                  {{ evaluate.addComment.createdAt.substring(0, 10) }}
                </div>
                <div class="pll1_text">{{ evaluate.addComment.content }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 回复评价 -->
        <div class="reply1" v-if="evaluate.replyComments.length !== 0">
          <div class="title">
            <div class="box"></div>
            全部评论（{{ evaluate.replyComments.length }}）
          </div>
          <div class="user1" v-for="(item, index) in evaluate.replyComments" :key="index">
            <!-- 判断回复状态   0 正常 -->
            <div v-if="item.status === 0" style="display: flex">
              <!-- 用户头像 -->
              <div>
                <img v-if="item.userHead === null" :src="item.shopHead" alt="" class="photo" />
                <img v-else :src="item.userHead" alt="" class="photo" />
              </div>
              <div class="right">
                <!-- 判断商家回复 -->
                <div class="title" v-if="item.type === 1">
                  <div style="display: flex; align-items: center">
                    {{ item.shopName }}
                    <div class="shop_reply">商家</div>
                  </div>
                  <!-- 操作按钮 -->
                  <div class="btn">
                    <!-- 第二个参数传2表示回复商家 -->
                    <span class="btn1" @click="reply(item, 2)">回复</span>
                    <el-popconfirm
                      confirm-button-text="是"
                      cancel-button-text="否"
                      :icon="InfoFilled"
                      @confirm="replyDelete(item.id)"
                      icon-color="#626AEF"
                      title="是否确认删除?">
                      <template #reference>
                        <span class="btn1">删除</span>
                      </template>
                    </el-popconfirm>
                  </div>
                </div>
                <!-- 判断普通用户回复 -->
                <div class="title" v-else>
                  {{ item.userName }}
                  <div class="btn">
                    <!-- 第二个参数传1表示回复根评论下面的其他回复 -->
                    <span class="btn1" @click="reply(item, 1)">回复</span>
                  </div>
                </div>
                <!-- 回复内容 -->
                <div class="reply1">
                  {{ item.content }}
                </div>
                <!-- 回复时间 -->
                <div class="time">
                  {{ item.createdAt.substring(0, 10) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-drawer>
      <!-- 商家回复框 -->
      <div class="reply" v-if="replyShow">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;商家回复
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="reply_box">
            <el-input
              v-model="description"
              type="textarea"
              rows="5"
              maxlength="200"
              show-word-limit
              placeholder="商家回复" />
            <div class="bottom">
              <div class="text">
                <el-icon> <Warning /> </el-icon>商家的回复将会在前台客户端呈现
              </div>
            </div>
          </div>
          <!-- 按钮区域 -->
          <div class="btn_center" style="position: absolute; bottom: 50px; left: 40%">
            <el-button class="hollow" @click="replyCancle">取消</el-button>
            <el-button class="solid" @click="replySure">确定</el-button>
          </div>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="mask1" v-if="mask" @click="maskBtn1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {Warning, Edit, StarFilled, Medal, InfoFilled} from '@element-plus/icons-vue';
import moment from 'moment';
import {
  RequestOrderGetDetail,
  RequestOrderHandpick,
  RequestOrderSearch,
  RequestOrderReplay,
  RequestReplyDel,
  RequestReplyConceal,
  RequestCommentDel,
} from '@/api/path/index.js';
import {ElMessage} from 'element-plus';
import useAuthorize from '@/hooks/authorize';
import {ro} from 'element-plus/es/locale';
let roleList = useAuthorize();

const tableData = ref<any>([]); // 表格列表
const mask = ref(false); //控制遮罩层显示
const order = ref<any>([]); //订单数组
const radio = ref('');
const drawer = ref(false);
const replyShow = ref(false);
const total = ref(0);
const adminId = JSON.parse(localStorage.getItem('roleInfo') as string).id;
const shopId = Number(localStorage.getItem('ShopId'));
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
/**
 * 表格颜色区分
 */
const tableRowClassName = ({row, rowIndex}: any) => {
  if (rowIndex % 2 !== 0) {
    return 'warning-row';
  }
};
// 挂载
onMounted(() => {
  acquireOrderComment();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
/**
 * 获取评论信息
 */
const acquireOrderComment = async () => {
  const a = await RequestOrderSearch(searchValue.value);
  tableData.value = a.resultObj.orderComments;
  total.value = a.resultObj.totalCount;
  for (let j = 0; j < tableData.value.length; j++) {
    tableData.value[j].createdAt = a.resultObj.orderComments[j].createdAt;
    tableData.value[j].updatedAt = a.resultObj.orderComments[j].updatedAt;
  }
};

/**
 * 搜索参数
 */
const searchValue = ref({
  shopId: shopId,
  orderSn: '',
  startAt: '',
  endAt: '',
  rating: '',
  page: 1,
  rows: 10,
});
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(30, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
/**
 * 搜索
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        tableData.value.page = 1;
        acquireOrderComment();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      tableData.value.page = 1;
      acquireOrderComment();
    }
  }
};
/**
 * 重置
 */
const reset = () => {
  searchValue.value = {
    shopId: shopId,
    orderSn: '',
    startAt: '',
    endAt: '',
    rating: '',
    page: 1,
    rows: 10,
  };
  radio.value = '';
  acquireOrderComment();
};
/**
 * 表格复选框选中事件
 */
const handleSelectionChange = (selection: any) => {
  order.value = [];
  for (let x = 0; x < tableData.value.length; x++) {
    tableData.value[x].selection = false;
  }
  for (let i = 0; i < selection.length; i++) {
    selection[i].selection = true;
    order.value.push(selection[i]);
  }
};

/**
 * 等级选择器
 */
const rating_options = [
  {
    value: 1,
    label: '一星',
  },
  {
    value: 2,
    label: '二星',
  },
  {
    value: 3,
    label: '三星',
  },
  {
    value: 4,
    label: '四星',
  },
  {
    value: 5,
    label: '五星',
  },
];
/**
 * 点击查看
 */
const evaluate = ref<any>();
const ordertype = ref(0); //订单评价类型---0非精选，1精选
const look = async (item: any) => {
  const a = await RequestOrderGetDetail(item.id);
  drawer.value = true;
  ordertype.value = a.resultObj.orderComment.type;
  evaluate.value = a.resultObj;
  console.log(evaluate.value);
};
/**
 * 设置精评论
 */
const handpick = async () => {
  const formimgs = new FormData();
  formimgs.append('id', evaluate.value.orderComment.id);
  const a = await RequestOrderHandpick(formimgs);
  ordertype.value = a.resultObj;
};
const replyId = ref(0); //回复的评论id
const replyType = ref(0); //判断回复主评论，还是下面的回复
const replyUserId = ref(0); //回复人的id
const replyUserName = ref(''); //被回复人的名字
/**
 * 点击回复
 */
const reply = (item: any, type: number) => {
  replyShow.value = true;
  mask.value = true;
  replyId.value = item.id; //被回复的评论的id
  replyType.value = type; //0用户回复，1商家回复
  replyUserId.value = item.userId; //被回复人的id
  replyUserName.value = item.userName; //被回复人的名字
  console.log(replyUserName.value);
  console.log(item);
};
const description = ref(''); //回复内容
/**
 * 回复确认事件
 */
const contenttext = ref();
const replySure = () => {
  if (replyType.value == 0) {
    // 回复根评论
    // 判断根评论是否匿名
    if (evaluate.value.orderComment.anonymous) {
      contenttext.value = '回复匿名用户：' + description.value;
    } else {
      contenttext.value = '回复' + replyUserName.value + ':' + description.value;
    }
  } else if (replyType.value == 1) {
    // 回复其他
    contenttext.value = '回复：' + replyUserName.value + '：' + description.value;
  } else {
    // 回复商家
    contenttext.value = '回复商家：' + description.value;
  }
  const a = {
    replyUserId: replyUserId.value, //被回复人的id
    type: 1, //0用户回复，1商家回复
    shopId: shopId, //店铺id
    replyType: replyType.value, //0表示回复根评论,1表示回复根评论下面的其他回复
    replyTo: replyId.value, //被回复的评论的id
    content: contenttext.value, //回复的内容
    adminId: adminId, //操作人的id
    rootCommentId: evaluate.value.orderComment.id,
  };
  description.value = '';
  console.log(replyUserName.value);

  new Promise((resolve, reject) => {
    RequestOrderReplay(a)
      .then((res: any) => {
        resolve(res);
        ElMessage.success('回复成功');
        evaluate.value.replyComments = res.resultObj;
        console.log('45675', evaluate.value.replyComments);
        replyShow.value = false;
        mask.value = false;
      })
      .catch((err: any) => {
        reject(err);
        ElMessage.error('回复失败');
      });
  });
};
/**
 * 回复取消
 */
const replyCancle = () => {
  replyShow.value = false;
  mask.value = false;
};

/**
 * 刪除回复
 */
const replyDelete = (id: number) => {
  new Promise((resolve, reject) => {
    RequestReplyDel(id)
      .then((res: any) => {
        resolve(res);
        ElMessage.success('删除成功');
        evaluate.value.replyComments = res.resultObj;
      })
      .catch((err: any) => {
        reject(err);
        ElMessage.error('删除失败');
      });
  });
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  acquireOrderComment();
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  replyShow.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 120px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.nav_ul {
  width: 100%;

  .nav_li {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navlist {
    .number {
      background: #116cf8;
      color: #fff;
    }
  }
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-drawer.rtl) {
  background: #f5f9ff;
  width: 600px !important;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

.table {
  .el-table .warning-row {
    background: #f2f7fc;
  }

  .nav_ul {
    width: 100%;

    .nav_li {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .nav_lis {
      position: relative;
      cursor: pointer;

      .number {
        padding: 0 5px;
        display: block;
        line-height: 16px;
        height: 16px;
        color: #fff;
        font-size: 12px;
        background: #409eff;
        border-radius: 8px;
        position: absolute;
        top: 2px;
        right: -12px;
      }
    }

    .navlist {
      .number {
        background: #409eff;
        color: #fff;
      }
    }
  }
}

/**
 * 评价详情
 */
.el-drawer {
  .commodity {
    background: #fff;
    display: flex;
    align-items: center;
    padding: 20px;

    .photo {
      width: 70px;
      height: 70px;
      margin-right: 10px;
    }

    .mes {
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 430px;
        font-size: 16px;
        font-weight: bold;

        .el-icon {
          color: #ffcf4d;
        }
      }

      .text {
        font-size: 12px;
        color: #cccccc;
      }
    }
  }

  .evaluat {
    padding: 20px;
    background: #fff;
    margin-top: 10px;
    display: flex;

    .photo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: pink;
    }

    .detail {
      margin-left: 10px;
      width: calc(100% - 30px);

      .user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 470px;

        .left {
          font-size: 16px;

          .time {
            font-size: 12px;
            color: #c0c0c0;
          }
        }

        .box {
          display: flex;
          align-items: center;
          border: 2px solid #a6d1ff;
          padding: 5px;
          border-radius: 5px;
          font-size: 12px;
          color: #71a6fa;
        }
      }

      .content {
        margin-top: 10px;
        font-size: 14px;
        color: #686868;

        .picture {
          margin-top: 10px;
          display: flex;
        }

        .addto {
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;

          .pl1 {
            color: #438bfa;
          }
        }

        .pll1_text {
          margin-top: 10px;
        }

        .reply_box1 {
          border-top: 1px solid #f5f6f9;
          margin-top: 20px;

          .title {
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }

          .btn {
            cursor: pointer;
            color: #5294fa;
            margin-left: 5px;
          }

          .text1 {
            color: #333;
            font-weight: 500;
            line-height: 20px;
          }
        }

        .shop_reply {
          margin-top: 20px;
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;

          .text {
            display: flex;
            align-items: center;

            .el-icon {
              color: #409eff;
              font-size: 16px;
              margin-right: 10px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .reply1 {
    padding: 20px;
    background: #fff;
    margin-top: 10px;
    line-height: 18px;

    .title {
      display: flex;
      align-items: center;
      font-size: 16px;

      .box {
        width: 3px;
        height: 20px;
        background: #116cf8;
        margin-right: 10px;
      }
    }

    .user1 {
      margin-top: 20px;
      display: flex;

      .photo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }

      .right {
        margin-left: 10px;

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 480px;
          font-size: 12px;

          .btn1 {
            display: inline-block;
            color: #79bbff;
            margin-right: 10px;
            cursor: pointer;
          }
        }

        .reply1 {
          margin-top: 8px;
          color: #b6b6b6;
        }
      }

      .time {
        color: #b6b6b6;
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }
}

/**
 * 商家回复
 */
.reply {
  width: 60%;
  height: 40%;
  background: #fff;
  position: absolute;
  z-index: 90;
  top: 30%;
  left: 50%;
  margin-left: -30%;

  .reply_box {
    margin-top: 30px;
  }

  .bottom {
    margin-top: 20px;
    color: #116cf8;
    text-align: center;
  }
}

.shop_reply {
  width: 40px;
  text-align: center;
  color: #ce9178;
  border: 1px solid #ce9178;
  margin-left: 10px;
  border-radius: 5px;
}

:deep(.el-textarea__inner) {
  background: #f7f7f7;
}

::deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #116cf8 !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #116cf8 !important;
}

::v-deep .el-drawer__body {
  overflow: hidden;
  overflow-y: scroll !important;
}
</style>
